<template>
    <div>
        <div style="height: 100%;">
            <el-transfer v-model="value1" :props="{key: 'id',label: 'name'}" :titles="['未赋予用户组', '已赋予用户组']" :data="userGroupsData" @left-check-change="leftSave" @right-check-change="rightSave" @change="changeSave"></el-transfer>
        </div>
        <div class="saveBtn">
            <el-button type="primary" :disabled="openDisabled" class="operatorBtn" @click="saveUserGroupManageData">保存</el-button>
        </div>
    </div>
</template>

<script>
/**
 * 授权----所属用户组
 * zqf
 */
export default {
    data() {
        return {
            value1: [],
            userGroupsData: [],                     //授权所属用户组数据
            openDisabled: false,
            systemId: this.$store.state.systemId,
            userId: this.$store.state.userManagementStore.userId,
        }
    },
    methods:{
        getUserGroupManageData(){//获取所有用户组数据
            var type = {
                headers: {
                    'Content-type': 'application/json;charset=UTF-8'
                }
            }
            this.$http.get(this.$url + 'userGroup/selectObject?systemId=' + this.systemId,type).then(res => {
                if(res.data.code === 20001) {
                    this.userGroupsData = res.data.data;
                }
            }).catch(err => {
                this.$message.error(err);
            })
        },
        getBelongsUserGroupManageData(){//获取该用户所属的用户组数据
            var type = {
                headers: {
                    'Content-type': 'application/json;charset=UTF-8'
                }
            }
            this.$http.get(this.$url + 'userManage/findUserGroupByuid?userId=' + this.userId,type).then(res => {
                this.value1 = []
                if(res.data.code === 20001) {
                    for(let i = 0;i < res.data.data.length;i++){
                        this.value1.push(res.data.data[i]['id']);
                    }
                } else {
                    // this.$message.error(res.data.msg);
                }
            }).catch(err => {
                this.$message.error(err);
            })
        },
        leftSave(value){//左侧列表元素被用户选中 / 取消选中时触发
            if(value.length > 0){
                this.openDisabled = true;
            }else{
                this.openDisabled = false;
            }
        },
        rightSave(value){//右侧列表元素被用户选中 / 取消选中时触发
            let that = this;
            if(value.length > 0){
                this.openDisabled = true
            }else{
                this.openDisabled = false;
            }
        },
        changeSave(value, direction, movedKeys){//右侧列表元素变化时触发
            if(value){
                this.openDisabled = false;
            }else{
                this.openDisabled = true;
            }
        },
        saveUserGroupManageData(){//所属用户组
            var type = {
                headers: {
                    'Content-type': 'application/json;charset=UTF-8'
                }
            }
            this.$http.post(this.$url + 'userManage/saveUserGroup?userId=' + this.userId + '&systemId=' + this.systemId,JSON.stringify(this.value1),type).then(res => {
                if(res.data.code == 20001) {
                    this.$store.dispatch('userManagementStore/getSearch', this.$url + 'userManage/search');
                    this.$message({message: '保存成功', type: 'success', duration: 2000});
                    setTimeout(() => {
                        this.getUserGroupManageData();
                        this.getBelongsUserGroupManageData();
                        let expandNodeId = this.$store.state.userManagementStore.expandNodeId;
                        this.$store.dispatch('userManagementStore/getEmployeeDataByDepartmentId', expandNodeId);			//刷新数据
                        this.$store.dispatch('userManagementStore/getSearch');
                    }, 500)
                }else{
                    this.$message({message: res.data.msg,type:'error'});
                }
            }).catch(err => {
                this.$message.error(err);
            })
        },
    },
    mounted(){
        this.getUserGroupManageData();
        this.getBelongsUserGroupManageData();
    }

}
</script>
<style lang="less" scoped>
    .operatorBtn{
        padding: 9px 112px !important;
        margin-top: 10px;
    }
    .saveBtn{
        text-align: center;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }
</style>
